<template>
  <view class="flex justify-center">
    <radio-group @change="radioChange">
      <view class="flex space-x-2">
        <view class="flex " v-for="(item, index) in items" :key="item.value">
          <radio :value="item.value" :checked="value === item.value"/>
          <view>{{ item.name }}</view>
        </view>
      </view>
    </radio-group>
  </view>
</template>

<script setup lang="ts">

const props = defineProps({
  value: {
    type: String,
    default: '天'
  }
})
const emit = defineEmits(['update:value', 'change'])

const items = [
  {
    name: '天',
    value: '天'
  },
  {
    name: '周',
    value: '周'
  },
  {
    name: '月',
    value: '月'
  },
  {
    name: '年',
    value: '年'
  }
]
const radioChange = (e: any) => {
  console.log(e.detail.value)
  emit('update:value', e.detail.value)
  emit('change')
}

</script>

<style scoped>

</style>